<template>
  <view>
      <simple-image :src="baseUrl + '/profile/bg/index-bg.png'" width="100%" height="440rpx"></simple-image>
    <view>
        <u-notice-bar :text="text1" bgColor="#f1f5ff" color="#5AB1EA" direction="column" duration="3000"
          fontSize="28rpx"></u-notice-bar>
      </view>
    <view class="padding-top-20 padding-x-5">
      <u-grid :border="false" col="5">
        <u-grid-item @click="goPage(listItem.url)" v-for="(listItem, listIndex) in list1" :key="listIndex">
          <simple-image :src="listItem.src" width="82rpx" height="82rpx"></simple-image>
          <text class="color-333 font-12 margin-top-5 margin-bottom-20">{{ listItem.title }}</text>
        </u-grid-item>
      </u-grid>
    </view>
    <view class="flex-between padding-x-10 margin-top-15">
      <view class="color-333 font-16 font-weight">班级精选</view>
      <view class="flex-end">
        <text class="color-main">更多</text>
        <u-icon name="arrow-right" color="#5AB1EA" size="12"></u-icon>
      </view>
    </view>
    <view class="padding-x-10 margin-top-10 flex flex-justify-between">
      <view 
        v-for="(item, index) in featuredClasses" 
        :key="index" 
        style="width: 346rpx;"
        @click="goToClassDetail(item.id)"
      >
        <simple-image :src="baseUrl + item.src" width="346rpx" height="220rpx" radius="20rpx"></simple-image>
        <view class="color-333 margin-top-5">{{ item.title }}</view>
        <view class="flex-between margin-top-5">
          <text class="color-redFont">￥{{ item.price }}</text>
          <text class="color-999 font-12">{{ item.students }}人学习</text>
        </view>
      </view>
    </view>
    <view class="flex-between padding-x-10 margin-top-15">
      <view class="color-333 font-16 font-weight">所有班级</view>
      <view class="flex-end">
        <text class="color-main">更多</text>
        <u-icon name="arrow-right" color="#5AB1EA" size="12"></u-icon>
      </view>
    </view>
    <view class="padding-x-10 margin-top-10 flex flex-justify-between flex-wrap">
      <view 
        v-for="(item, index) in allClasses" 
        :key="index" 
        style="width: 346rpx;" 
        class="margin-bottom-10"
        @click="goToClassDetail(item.id)"
      >
        <simple-image :src="baseUrl + item.src" width="346rpx" height="220rpx" radius="20rpx"></simple-image>
        <view class="color-333 margin-top-5">{{ item.title }}</view>
        <view class="flex-between margin-top-5">
          <text class="color-redFont">￥{{ item.price }}</text>
          <text class="color-999 font-12">{{ item.students }}人学习</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import config from '@/config'
const baseUrl = config.baseUrl
import { listClass } from '@/api/course/class'
import { listNotice } from '@/api/system/notice'

export default {
  data() {
    return {
      baseUrl: baseUrl,
      notices: [],
      text1: [],
      list1: [
        {
          src: '/static/images/index/icon1.png',
          title: '考试信息',
          url: '/pages/work/test/index'
        },
        {
          src: '/static/images/index/icon2.png',
          title: '学习进度',
          url: '/pages/work/myProgress/index'
        },
        {
          src: '/static/images/index/icon3.png',
          title: '开票申请',
          url: '/pages/work/invoice/index'
        },
        {
          src: '/static/images/index/icon3.png',
          title: '更多功能',
          url: '/pages/work/order/delivery/index?statusStr=40,50,100'
        },
        {
          src: '/static/images/index/icon3.png',
          title: '敬请期待',
          url: '/pages/work/order/delivery/index?statusStr=40,50,100'
        },
      ],
      featuredClasses: [],
      allClasses: []
    }
  },
  onLoad() {
    this.loadNotices()
    this.loadFeaturedClasses()
    this.loadAllClasses()
  },
  methods: {
    goPage(url) {
      if (url) {
        uni.navigateTo({
          url
        })
      }
    },
    goToClassDetail(id) {
      uni.navigateTo({
        url: '/pages/class/detail?id=' + id
      })
    },
    // 加载精选班级数据
    async loadFeaturedClasses() {
      try {
        const query = {
          isPublic: 1,
          isFeatured: 1,
          pageNum: 1,
          pageSize: 4
        }
        const response = await listClass(query)
        if (response.code === 200 && response.rows) {
          this.featuredClasses = response.rows.map(item => ({
            id: item.id,
            src: item.coverImage,
            title: item.className,
            price: item.currentPrice,
            students: item.studentCount
          }))
        }
      } catch (error) {
        console.error('加载精选班级失败:', error)
        uni.showToast({
          title: '加载班级信息失败',
          icon: 'none'
        })
      }
    },
    // 加载所有班级数据
    async loadAllClasses() {
      try {
        const query = {
          isPublic: 1,
          pageNum: 1,
          pageSize: 8
        }
        const response = await listClass(query)
        if (response.code === 200 && response.rows) {
          this.allClasses = response.rows.map(item => ({
            id: item.id,
            src: item.coverImage,
            title: item.className,
            price: item.currentPrice,
            students: item.studentCount
          }))
        }
      } catch (error) {
        console.error('加载所有班级失败:', error)
        uni.showToast({
          title: '加载班级信息失败',
          icon: 'none'
        })
      }
    },
    // 加载通知数据
    async loadNotices() {
      try {
        const query = {
          pageNum: 1,
          pageSize: 3
        }
        const response = await listNotice(query)
        if (response.code === 200 && response.rows) {
          this.notices = response.rows
          // 更新通知栏显示的文本
          this.text1 = response.rows.map(item => item.noticeTitle || item.noticeContent)
        }
      } catch (error) {
        console.error('加载通知失败:', error)
        // 如果加载失败，使用默认通知
        this.text1 = ['暂无通知信息']
      }
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background: #ffffff;
}
</style>